<template>
  <div class="group-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-fm">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
          >增加车辆系列</el-button
        >
      </div>

      <TableSelfSet
        v-if="dg.columns.length > 0"
        :tbTitle="'品牌类型-车辆系列'"
        :dgName="dg.dgName"
        :tbId="dg.tbName"
        :srcCols="dg.srcCols"
        :columns="dg.columns"
        @saveSet="saveTbSet"
      />
    </div>
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight - 90"
      :row-class-name="rowClassName"
      border
      fit
      @header-dragend="dragHeader"
    >
      <el-table-column fixed="left" type="index" width="40"></el-table-column>
      <fragment v-for="col in dg.columns" :key="col.field">
        <el-table-column
          :class-name="dg.dgName"
          :prop="col.field"
          :label="col.label"
          :width="col.width"
        >
          <template slot-scope="{ row }">
            <template v-if="col.field == 'oper'">
              <el-button type="text" size="small" @click="handleEdit(row)"
                >修改</el-button
              >
              <el-button type="text" size="small" @click="handleDelete(row)"
                >删除</el-button
              >
            </template>
            <template v-else-if="col.field == 'vehicleType'">
              {{ getArrCarType(row.vehicleType) }}
            </template>
            <template v-else>{{ getColVal(row, col.field) }}</template>
          </template>
        </el-table-column>
      </fragment>
    </el-table>
    <pagination
      v-show="dg.total > 0"
      :total="dg.total"
      :page.sync="dg.ps.page"
      :limit.sync="dg.ps.rows"
      @pagination="getDgList"
    />

    <AddSeries
      v-if="md.add.state"
      :state="md.add.state"
      :isEditId="isEditId"
      @getMdState="getAddMdState"
      @reloadDg="getDgList"
    />
  </div>
</template>
<script>
import DataGridBase from "@/views/mixins/DataGridBase";
import DataGridResize from "@/views/mixins/DataGridResize";
import elDragDialog from "@/directive/el-drag-dialog";
import TableSelfSet from "@/components/TableSelfSet";
import Pagination from "@/components/Pagination";
import AddSeries from "./addSeries";

// import {
//   brandUpdate,
//   findBrandByIdList,
// } from "@/api/services/system.service";
import { findTrainList, trainDelete } from "@/api/services/common.service";
export default {
  name: "Series",
  mixins: [DataGridBase, DataGridResize],
  directives: { elDragDialog },
  components: { TableSelfSet, Pagination, AddSeries },
  data() {
    let cols = [
      { label: "系列名称", field: "trainName" },
      { label: "车辆配置", field: "carConfig" },
      { label: "添加时间", field: "addTime" },
      { label: "操作", field: "oper" },
    ];

    return {
      dg: {
        dgName: "dg",
        tbName: "seriesTb",
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          // 过滤参数
          page: 1,
          rows: 20,
        },
      },
      md: {
        add: { state: false },
        upd: { state: false },
      },
      profintOptions: [
        { value: "INCOME", label: "收入类" },
        { value: "OUTPAY", label: "支出类" },
        { value: "TRANS", label: "互转类" },
      ],
      isEdit: false,
      isEditId: null,
    };
  },

  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  methods: {
    // getArrCarType(index) {
    //   return {
    //     BUS: "大巴车",
    //     MINIBUS: "中巴车",
    //     MPV: "商务车",
    //     SUV: "越野车",
    //     CAR: "轿车",
    //     BMPV: "保姆车",
    //   }[index];
    // },
    formatterDirection(row) {
      let result = this.profintOptions.find(
        (item) => item.value === row.profitDirection
      );
      return result.label;
    },
    handleAdd() {
      this.md.add.state = true;
      this.isEditId = null;
    },
    handleAddSend(data) {
      this.md.add.state = true;
    },
    handleEdit(row) {
      this.md.add.state = true;
      this.isEditId = row.id;
    },
    handleDelete(row) {
      this.U.qconfim(`确认删除品牌类型【${row.trainName}】吗？`).then(r => {
        if(r){
          let loading = this.U.qloading("删除中...");
          trainDelete({ id: row.id }).then((res) => {
            this.U.qclose(loading);
            const { code, msg } = res;
            if (code !== 1) {
              return this.U.qerror(msg);
            }
            this.U.qsuccess(msg);
            this.getDgList();
          }).catch(() => {
            this.U.qclose(loading);
          });
        }
      });
    },
    handleClick(row) {
      console.log(row);
    },
    /** 获取-分页列表数据 */
    getDgList() {
      this.dg.list = [];
      let loading = this.U.qloading("数据请求中...");
      findTrainList(this.dg.ps)
        .then((res) => {
          this.U.qclose(loading);
          const { code, data, count } = res;
          if (code === 1) {
            let list = data;
            list.forEach((it) => {
              it.dgName = this.dg.dgName;
            });
            this.dg.list = list;
            this.dg.total = count;
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },
    /**
     * 打开添加弹框
     */
    getAddMdState(e) {
      this.isEdit = false;
      this.md.add.state = e;
      this.md.upd.state = e;
    },
    /**
     * 打开修改弹框
     * @param e 弹框显隐状态
     */
    getUpdMdState(e) {
      // 关闭弹框
      if (e === false) {
        this.md.upd.state = e;
        return;
      }
      // 打开弹框
      let len = this.dg.selRows;
      if (len.length !== 1) {
        this.U.qerror("请选择一条数据");
      } else {
        this.md.upd = { state: e, data: this.dg.selRows[0] };
      }
    },
    /**
     * 删除
     */
    deleteVehicle() {
      const that = this;

      let len = that.dg.selRows.length;

      let row = that.dg.selRows[0];
      that.U.qconfim(`确认删除车辆类型${row.trainName}】吗？`).then(r => {
        if(r){
          let loading = that.U.qloading("删除中...");
          groupDelete({ id: row.id }).then((res) => {
            that.U.qclose(loading);

            if (res.code !== 1) {
              that.U.qerror(res.msg);
            } else {
              that.U.qsuccess(res.msg);

              // 删除一行
              that.dg.list.splice(row.index, 1);
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.paddingLeft {
  padding-left: 24px;
}
.paddingLeft_3 {
  padding-left: 48px;
}
</style>